<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>API测试页面</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
        .test-section {
            margin: 20px 0;
            padding: 20px;
            border: 1px solid #ddd;
            border-radius: 5px;
        }
        .form-group {
            margin: 10px 0;
        }
        label {
            display: inline-block;
            width: 100px;
        }
        input {
            padding: 5px;
            width: 200px;
        }
        button {
            padding: 10px 20px;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 3px;
            cursor: pointer;
        }
        button:hover {
            background-color: #0056b3;
        }
        .result {
            margin-top: 10px;
            padding: 10px;
            background-color: #f8f9fa;
            border-radius: 3px;
            white-space: pre-wrap;
        }
        .error {
            background-color: #f8d7da;
            color: #721c24;
        }
        .success {
            background-color: #d4edda;
            color: #155724;
        }
    </style>
</head>
<body>
    <h1>API测试页面</h1>
    
    <div class="test-section">
        <h2>用户登录测试</h2>
        <div class="form-group">
            <label>用户名:</label>
            <input type="text" id="loginUsername" value="李明">
        </div>
        <div class="form-group">
            <label>密码:</label>
            <input type="password" id="loginPassword" value="password">
        </div>
        <button onclick="testLogin()">测试登录</button>
        <div id="loginResult" class="result"></div>
    </div>

    <div class="test-section">
        <h2>获取用户信息测试</h2>
        <div class="form-group">
            <label>Token:</label>
            <input type="text" id="userInfoToken" placeholder="请输入登录后获得的token">
        </div>
        <button onclick="testGetUserInfo()">获取用户信息</button>
        <div id="userInfoResult" class="result"></div>
    </div>

    <div class="test-section">
        <h2>获取项目列表测试</h2>
        <div class="form-group">
            <label>Token:</label>
            <input type="text" id="projectsToken" placeholder="请输入登录后获得的token">
        </div>
        <button onclick="testGetProjects()">获取项目列表</button>
        <div id="projectsResult" class="result"></div>
    </div>

    <div class="test-section">
        <h2>获取项目详情测试</h2>
        <div class="form-group">
            <label>Token:</label>
            <input type="text" id="projectDetailToken" placeholder="请输入登录后获得的token">
        </div>
        <div class="form-group">
            <label>项目ID:</label>
            <input type="number" id="projectId" value="1001" placeholder="请输入项目ID">
        </div>
        <button onclick="testGetProjectDetail()">获取项目详情</button>
        <div id="projectDetailResult" class="result"></div>
    </div>

    <div class="test-section">
        <h2>服务器状态测试</h2>
        <button onclick="testServerStatus()">测试服务器状态</button>
        <div id="serverResult" class="result"></div>
    </div>

    <script>
        async function testLogin() {
            const username = document.getElementById('loginUsername').value;
            const password = document.getElementById('loginPassword').value;
            const resultDiv = document.getElementById('loginResult');
            
            try {
                const response = await fetch('/auth/login', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({ username, password })
                });
                
                const data = await response.json();
                
                if (data.code === 200) {
                    resultDiv.className = 'result success';
                    resultDiv.textContent = `登录成功!\n用户信息: ${JSON.stringify(data.data.user_info, null, 2)}\nToken: ${data.data.token}`;
                    
                    // 自动填充token到用户信息测试框
                    document.getElementById('userInfoToken').value = data.data.token;
                } else {
                    resultDiv.className = 'result error';
                    resultDiv.textContent = `登录失败: ${data.message}`;
                }
            } catch (error) {
                resultDiv.className = 'result error';
                resultDiv.textContent = `请求错误: ${error.message}`;
            }
        }

        async function testGetUserInfo() {
            const token = document.getElementById('userInfoToken').value;
            const resultDiv = document.getElementById('userInfoResult');
            
            if (!token) {
                resultDiv.className = 'result error';
                resultDiv.textContent = '请先登录获取token';
                return;
            }
            
            try {
                const response = await fetch('/auth/user-info', {
                    method: 'GET',
                    headers: {
                        'Authorization': `Bearer ${token}`
                    }
                });
                
                const data = await response.json();
                
                if (data.code === 200) {
                    resultDiv.className = 'result success';
                    resultDiv.textContent = `获取用户信息成功!\n${JSON.stringify(data.data, null, 2)}`;
                } else {
                    resultDiv.className = 'result error';
                    resultDiv.textContent = `获取用户信息失败: ${data.message}`;
                }
            } catch (error) {
                resultDiv.className = 'result error';
                resultDiv.textContent = `请求错误: ${error.message}`;
            }
        }

        async function testGetProjects() {
            const token = document.getElementById('projectsToken').value;
            const resultDiv = document.getElementById('projectsResult');
            
            if (!token) {
                resultDiv.className = 'result error';
                resultDiv.textContent = '请先登录获取token';
                return;
            }
            
            try {
                const response = await fetch('/projects', {
                    method: 'GET',
                    headers: {
                        'Authorization': `Bearer ${token}`
                    }
                });
                
                const data = await response.json();
                
                if (data.code === 200) {
                    resultDiv.className = 'result success';
                    resultDiv.textContent = `获取项目列表成功!\n项目数量: ${data.data.length}\n${JSON.stringify(data.data, null, 2)}`;
                } else {
                    resultDiv.className = 'result error';
                    resultDiv.textContent = `获取项目列表失败: ${data.message}`;
                }
            } catch (error) {
                resultDiv.className = 'result error';
                resultDiv.textContent = `请求错误: ${error.message}`;
            }
        }

        async function testGetProjectDetail() {
            const token = document.getElementById('projectDetailToken').value;
            const projectId = document.getElementById('projectId').value;
            const resultDiv = document.getElementById('projectDetailResult');
            
            if (!token) {
                resultDiv.className = 'result error';
                resultDiv.textContent = '请先登录获取token';
                return;
            }
            
            if (!projectId) {
                resultDiv.className = 'result error';
                resultDiv.textContent = '请输入项目ID';
                return;
            }
            
            try {
                const response = await fetch(`/projects/${projectId}`, {
                    method: 'GET',
                    headers: {
                        'Authorization': `Bearer ${token}`
                    }
                });
                
                const data = await response.json();
                
                if (data.code === 200) {
                    resultDiv.className = 'result success';
                    resultDiv.textContent = `获取项目详情成功!\n${JSON.stringify(data.data, null, 2)}`;
                } else {
                    resultDiv.className = 'result error';
                    resultDiv.textContent = `获取项目详情失败: ${data.message}`;
                }
            } catch (error) {
                resultDiv.className = 'result error';
                resultDiv.textContent = `请求错误: ${error.message}`;
            }
        }

        async function testServerStatus() {
            const resultDiv = document.getElementById('serverResult');
            
            try {
                const response = await fetch('/api/test');
                const data = await response.json();
                
                if (data.code === 200) {
                    resultDiv.className = 'result success';
                    resultDiv.textContent = `服务器运行正常!\n${JSON.stringify(data, null, 2)}`;
                } else {
                    resultDiv.className = 'result error';
                    resultDiv.textContent = `服务器状态异常: ${data.message}`;
                }
            } catch (error) {
                resultDiv.className = 'result error';
                resultDiv.textContent = `请求错误: ${error.message}`;
            }
        }
    </script>
</body>
</html> 